
<div apes-row apesGutter="5" *ngIf="_clickKey">
  <!-- 左 -->
  <div apes-col nzXs="12" apesMd="12" >
    <!-- 左上 车辆信息 -->
    <div apes-col nzXs="24" apesMd="24" style="margin-bottom: 20px;">
      <apes-card [apesCover]="avatarTemplate" [apesBodyStyle]="gridStyle"
                 style="margin-bottom: 0 !important; box-shadow: 10px 10px 15px  #ddd;"
                  (click)="getTopChanges()">

        <!-- 下面部份 -->
        <div class="box-bot">
          <!-- 接车人，当前节点 -->
          <div class="bot-one">
            <span><b>接车人: </b>&nbsp;{{ clickKey['JIECRMC'] }}</span>
            <span class="one-span">{{ clickKey['JD'] }}</span>
          </div>

          <!-- 接车时间，节点超时 -->
          <div class="bot-two">
            <div class="two-time">
              <span><b>接车时间: </b>&nbsp;{{ clickKey['JCRQ_SJ'] }}</span>
            </div>
            <div class="two-over" *ngIf="clickKey['JDCS']">
              <span><b>节点超时: </b>&nbsp;{{ toHour(clickKey['JDCS']) }}</span>
            </div>
          </div>
        </div>

      </apes-card>

      <!-- 上面部份 -->
      <ng-template #avatarTemplate>
        <div class="box-top">
          <!-- 车标，车牌号，车型，预计交车 -->
          <div class="top-nav">
            <!-- 车标 -->
            <div class="nav-img">
              <img
                [src]="clickKey['TPLJ'] ? 'http://10.2.0.34/' + clickKey['TPLJ'] : 'http://10.2.0.34/default/Logo51*51.png' "/>
            </div>

            <!-- 车牌号，车型 -->
            <div class="nav-p">
              <p>{{ clickKey['CPHM'] }}</p>
              <p>{{ clickKey['CHXMC'] }}</p>
            </div>

            <!-- 预计交车时间 -->
            <div class="nav-span" *ngIf=" clickKey['YJJCSJ'] !== undefined">
              <span *ngIf=" clickKey['YJJCSJ'] < 0 ">离预计交车<i> {{ showTime(clickKey['YJJCSJ']) }} </i></span>
              <span *ngIf=" clickKey['YJJCSJ'] > 0 ">超预计交车<i> {{ showTime(clickKey['YJJCSJ']) }} </i></span>
            </div>
          </div>

          <!-- 服务分类 -->
          <div class="top-end">
            <div class="end-fa" *ngFor="let list of clickKey.FWLXMC">
              <span>{{ list }}</span>
            </div>
          </div>
        </div>
      </ng-template>

    </div>

    <!-- 左下 明细信息 -->
    <div apes-col apesSpan="24" class="left-auto">
      <div *ngFor="let list of _parmas" >
        <apes-card (click)="getChange(list)" [class.title-clo]=" list['title'] === total ">
          <div>
            {{ list['title'] }} {{ list['ZHS'] }}
          </div>
        </apes-card>
      </div>
    </div>
  </div>

  <!-- 右 -->
  <div apes-col nzXs="12" apesMd="12" class="right-auto">
    <!-- 右上 -->
    <div apes-col nzXs="24" apesMd="24" style="margin-bottom: 20px;" [ngStyle]="{ display: bisi}">
      <apes-card [apesCover]="cardTemplate" [apesBodyStyle]="gridStyle"
    style="margin-bottom: 0 !important; box-shadow: 10px 10px 15px  #ddd;" >

    <div *ngFor="let head of topData">
    <div style="margin: 0 2%;" *ngFor="let i of head.rightList">
    <span> <b>{{ i.lable }}</b>：</span>
    <span>{{ rightList[i['feild']] }}</span>
    </div>
    </div>
    </apes-card>

      <ng-template #cardTemplate>
    <div style=" border-bottom: 1px solid #ddd;">
    <div style="display: flex;margin: 1%;" *ngFor="let icon of iconData">
    <div apes-col apesMd="8" style="text-align: center;">
    <span>
    <img [src]=" (icon['HJ']=== 1) ? 'assets/tmp/img/bi/clB1.png' : 'assets/tmp/img/bi/clB.png' "/>
    </span>
    <i style="display: block"><img
    [src]="(icon['HJ'] === 1) ?  'assets/tmp/img/bi/clE.png' :  'assets/tmp/img/bi/jinggao.png' "/></i>
    </div>
    <div apes-col apesMd="8" style="text-align: center;">
    <span>
    <img [src]=" (icon['TSJ'] === 1) ? 'assets/tmp/img/bi/clC1.png' : 'assets/tmp/img/bi/clC.png' "/>
    </span>
    <i style="display: block"><img
    [src]=" (icon['TSJ'] === 1) ?  'assets/tmp/img/bi/clE.png' :  'assets/tmp/img/bi/jinggao.png' "/></i>
    </div>
    </div>
    </div>
    </ng-template>
    </div>

    <!-- 右下 -->
    <div apes-col apesSpan="24" [ngStyle]="{ display: visible}">
      <apes-card>
      <!-- 定损报价 -->
      <div *ngIf="title === '定损报价'">
      <apes-divider [apesText]="title" style="margin: 0; font-size: 18px; font-weight: bold;"></apes-divider>
        <apes-card *ngFor="let data of rowData">
          <div class="popover">
            <div class="popo-lf">
        <span> {{ data['KSRQ'] }}</span>
        &nbsp; - &nbsp;
        <span> {{ data['WCRQ'] }}</span>
        <br>
        <span> {{ data['ZDR'] }}</span>
        </div>
            <div class="popo-rg">
        <span *ngIf="data['HS']">
        预计<i class="popo-tit">{{ showTime(data['HS']) }}</i>后完成
        </span>
        <br>
        <span *ngIf="data['TIO']">
        耗时{{ showTime(data['TIO']) }}
        </span>
        </div>
          </div>
          <div>
            <span> {{ data['DSXM'] }}</span>
          </div>
        </apes-card>
      </div>

      <!-- 配件询价 -->
      <div  *ngIf="title === '配件询价'">
      <apes-divider [apesText]="title" style="margin: 0; font-size: 18px; font-weight: bold;"></apes-divider>
      <apes-card *ngFor="let data of rowData">
        <div class="popover">
          <div class="popo-lf">
            <span> {{ data['KSRQ_SJ'] }}</span>
            &nbsp; - &nbsp;
            <span> {{ data['WCRQ_SJ'] }}</span>
            <br>
            <span> {{ data['RYMC'] }}</span>
            </div>
          <div class="popo-rg">
          <span *ngIf="data['HS']">
          预计<i class="popo-tit">{{ showTime(data['HS']) }}</i>后完成
          </span>
          <br>
          <span *ngIf="data['TIO']">
          耗时{{ showTime(data['TIO']) }}
          </span>
          </div>
        </div>
        <div>
          <span> {{ data['SPMC'] }}</span>
        </div>
      </apes-card>
      </div>

      <!-- 配件要货 -->
      <div  *ngIf="title === '配件要货'">
      <apes-divider [apesText]="title" style="margin: 0; font-size: 18px; font-weight: bold;"></apes-divider>
      <apes-card *ngFor="let data of rowData">
      <div class="popover">
        <div class="popo-lf">
      <span> {{ data['SHRQ_SJ'] }}</span>
      &nbsp; - &nbsp;
      <span *ngIf="data['SJDMDRQ_SJ']"> {{ data['SJDMDRQ_SJ'] }}</span>
      <span *ngIf="data['SJDMDRQ_SJ'] === undefined && data['YJDMDRQ_SJ']"> {{ data['YJDMDRQ_SJ'] }}</span>
      <span *ngIf="data['SJDMDRQ_SJ'] === undefined && data['YJDMDRQ_SJ'] === undefined &&
      data['YQDMDRQ_SJ']"> {{ data['YQDMDRQ_SJ'] }}</span>
      <br>
      <!--<span> {{ data['RYMC'] }}</span>-->
      </div>
        <div class="popo-rg">
          <span *ngIf="data['HS']">
          预计<i class="popo-tit">{{ showTime(data['HS']) }}</i>后完成
          </span>
          <br>
          <span *ngIf="data['TIO']">
          耗时{{ showTime(data['TIO']) }}
          </span>
        </div>
      </div>
        <div>
          <span> {{ data['SPMC'] }}</span>
        </div>
      </apes-card>
      </div>

      <!-- 车辆施工 -->
      <div  *ngIf="title === '车辆施工'">
      <apes-divider [apesText]="title" style="margin: 0; font-size: 18px; font-weight: bold;"></apes-divider>
      <apes-card *ngFor="let data of rowData">
        <div class="popover">
          <div class="popo-lf">
            <span> {{ data['SGKSRQ_SJ'] }}</span>
            &nbsp; - &nbsp;
            <span> {{ data['SGJSRQ_SJ'] }}</span>
            <br>
            <span> {{ data['SGRY'] }}</span>
          </div>
              <div class="popo-rg">
                <span *ngIf="data['HS']">
                预计<i class="popo-tit">{{ showTime(data['HS']) }}</i>后完成
                </span>
                <br>
                <span *ngIf="data['TIO']">
                耗时{{ showTime(data['TIO']) }}
                </span>
              </div>
        </div>
        <div class="popo-lf">
          <span> {{ data['JD'] }}</span>
        </div>
        <div>
          <span> {{ data['SPMC'] }}</span>
        </div>
      </apes-card>
      </div>

      <div *ngIf="rowData.length === 0">无数据</div>
      </apes-card>
      </div>
  </div>

</div>
